body {
  margin: 0;
  background-color: AliceBlue;
  color: #333;
  font: 100% / normal sans-serif;
}

main {
  margin: 0 auto;
/*  padding: 4rem 0;
  width: 95%; */
  padding: 1rem 0;
  width: 98%;  
  max-width: 60rem;
}

form {
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1rem;
  border-radius: 1rem;
  background-color: hsl(0, 0%, 100%);
  border: 4px solid hsl(0, 0%, 90%);
  display: grid;
  grid-template-columns: auto; /* Altere para "1fr" para esticar o formulário */
  gap: 2rem;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  word-wrap: break-word;
}

button {
    margin-top: 10px;
    margin-left: 10px;
    background-color: #368989;
    color: #FFFFFF;
    text-transform: uppercase;
    transition: 0.3s;
    text-align: center;
    
    font-size: 10px;
    border-radius: 5px;
    border: none;
    padding: 10px;    
}
    
div {
  margin: 0 auto;
  text-align: center; 
}



footer {
  margin: 0 auto; 
  background-color: AliceBlue;
  color: #333;
  text-align: center;
  font-size: 8px; 
}


label {
  text-align: left;
  padding-top: 10px;
  padding-right: 10px;  
  margin-right: 10px; 
  font-size: 10px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  float: left;
  height: 16px;
}

.labelOptions {
  flex: 1;
  padding-top: 4px;
  margin-left: 3px;
  float: left;
  height: 16px;
}
.inputOptions {
  flex: 1;
  padding-top: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  float: left;
  height: 16px;
}

opcoes {
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;  
  margin-right: 10px; 
  font-size: 10px;
}

.amountbox {
  margin: 0 auto; 
  width: 100%;  /* AMM 20240127 */
  padding: 1rem;
  border-radius: 1rem;
  background-color: hsl(0, 0%, 96%);
  border: 4px solid hsl(0, 0%, 90%);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10x;
  word-wrap: break-word;
  grid-template-columns: auto;
  row-gap: 0px;  /* era 5 */
  box-sizing: border-box;
}

.radio-group {
  display: flex;
  flex-direction: column;
}

.radio-group label {
  display: flex;
  align-items: center;
  /*margin-bottom: 10px; */
}

.radio-group input[type="radio"] {
  margin-right: 5px;
}

.inline-elements {
  display: inline-block;
  margin-left: 5px;
}

/* 20240316 */

.tab-container {
  overflow: hidden;
}

.tablinks {
  /* background-color: #f1f1f1; */
  background-color: #ccc;

  float: left;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
}

.tablinks:hover {
  background-color: #ddd;
}
  
.tabcontent {
  margin: 0 auto; 
  width: 90%;  /* AMM 20240127 */
  padding: 1rem;

  display: none;
 
 /* margin: 4px;
  width: 240px; */ /* Largura fixa de 240 pixels */
  height: 250px; /* Altura fixa de 220 pixels */
  border: 1px solid hsl(0, 0%, 90%); /* Moldura fina de 1 pixel com cor preta */
  border-radius: 1rem;
}

/* Mostra a aba atual */
.tabcontent.active {
  display: block;
}

.tabcontent:first-child {
  display: block;
}

.tabprazo {
  display: none;
  padding: 20px;
  margin: 20px;
  width: 260px; /* Largura fixa de 300 pixels */

  border: 1px solid hsl(0, 0%, 90%); /* Moldura fina de 1 pixel com cor preta */
  border-radius: 1rem;
}

.opcaoprazo{
  width: 200px;
  height: 120px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid hsl(0, 0%, 90%); /* Moldura fina de 1 pixel com cor preta */
  border-radius: 1rem;
}

#vencimento{
  width: 140px;
 /* align: center; */
}

.button-container {
  display: flex; /* Utilizando flexbox */
  justify-content: space-between; /* Distribui os itens igualmente ao longo do eixo principal (horizontal) */
  padding: 10px;
  align-items: center; /* Alinha os botões verticalmente ao centro */
}
  /* Estilo para os bot�es */
  .button-container button {
    height: 30px; /* Altura do bot�o */
    font-size: 10px; /* Tamanho da fonte */
    color: white; /* Cor do texto */
    background-color: rgb(8, 88, 194); /* Cor de fundo */
    border: none; /* Removendo a borda */
    padding: 0 20px; /* Espa�amento interno */
    border-radius: 5px; /* Borda arredondada */
    cursor: pointer; /* Cursor de ponteiro ao passar sobre o bot�o */
  }

  .clear-button-div {
    display: none;
  }

  .clear-button {
    height: 30px; /* Altura do bot�o */
    width: 70px; /* Largura do bot�o */
    background-color: #666; /* Fundo cinza escuro */
    padding: 0px 10px;
    border: none;
    border-radius: 5px;
    font-size: 10px;
    color: #fff; /* Texto branco */
    margin: 0 auto; /* Define margens automáticas para centralizar horizontalmente */
}
/* Estilo para os r�tulos */
.tabcontent label {
    display: block; /* Altera o r�tulo para exibir como bloco */
    margin-bottom: 5px; /* Adiciona margem inferior para separa��o visual */
}

/* Estilo para os campos de entrada */
.tabcontent input {
    width: 100%; /* Define a largura para ocupar todo o espa�o dispon�vel */
    box-sizing: border-box; /* Inclui a largura do padding e da borda no c�lculo da largura total */
}

.checkbox-container {
    width: 100px;
    display: flex; /* Usa flexbox */
    align-items: center; /* Alinha os itens verticalmente */
    /* justify-content: center;  Alinha os itens horizontalmente */
   /* margin-right: -3px;  Reduz a margem entre os itens */
}

.checkbox-container input[type="checkbox"] {
    margin-top: 0; /* Remova a margem superior padr�o */
    margin-right: -10px; /* Adiciona um espa�amento entre os checkboxes e os r�tulos */
}

.radio-container {
    width: 200px;
    margin: 0 auto; /* Define margens autom�ticas para centralizar horizontalmente */
    display: flex; /* Usa flexbox */
    align-items: center; /* Alinha os itens verticalmente */
    justify-content: center;  /* Alinha os itens horizontalmente */
    margin-right: -3px;  /* Reduz a margem entre os itens */
}

input[type="radio"] {
    display: inline-block;
    margin-right: 0px; /* Adiciona um espa�o entre os bot�es de r�dio */
}

.tab {
  overflow: hidden;
}

.tab button {
  background-color: #f2f2f2;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  float: left;
  transition: background-color 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tabcontent {
  display: none;
  padding: 20px;
}

.sequencial-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
  float: left;
}

.sequencial-btn:hover {
  background-color: #45a049;
}

.limpar-button {
  margin-right: auto; /* Move o botão Limpar para o canto esquerdo */
  background-color: rgba(255, 255, 0, 0.5); /* Amarelo opaco */
  color: black; /* Cor do texto */
  border: 1px solid rgba(0, 0, 0, 0.5); /* Borda preta opaca */
  /* Adicione outros estilos conforme necessário */
}

.limpar-button:disabled {
  margin-right: auto; /* Move o botão Limpar para o canto esquerdo */
  background-color: rgba(255, 255, 0, 0.3); /* Amarelo opaco mais claro para botão desativado */
  color: rgba(0, 0, 0, 0.5); /* Texto mais claro para botão desativado */
  border: 1px solid rgba(0, 0, 0, 0.3); /* Borda mais clara para botão desativado */
  cursor: not-allowed; /* Altera o cursor para não permitido quando o botão está desativado */
}

.button-container-nav {
  display: flex;
  width: 100%;
  justify-content: center; /* Centraliza os elementos na direção principal (horizontalmente) */
  align-items: center; /* Centraliza os elementos na direção transversal (verticalmente) */
  
}

.clear-button-nav {
  margin-right: auto; /* Move o botão Limpar para o canto esquerdo */
  height: 30px; /* Altura do bot�o */
  width: 70px; /* Largura do bot�o */
  background-color: #666; /* Fundo cinza escuro */
  padding: 0px 10px;
  border: none;
  border-radius: 5px;
  font-size: 8px;
  color: #fff; /* Texto branco */  
}

.button-nav {
  margin-right: auto; /* Move o botão Limpar para o canto esquerdo */
  height: 30px; /* Altura do bot�o */
  width: 70px; /* Largura do bot�o */
  background-color: rgb(8, 88, 194); /* Cor de fundo */
  padding: 0px 10px;
  border: none;
  border-radius: 5px;
  font-size: 8px;
  color: #fff; /* Texto branco */  
  cursor: pointer; /* Cursor de ponteiro ao passar sobre o bot�o */  
}
.spacer-nav {
  flex-grow: 1; /* Espaçador flexível para empurrar os botões restantes para a direita */
}


.button-container-navssss {
  display: flex;
  width: 100%;
  /*grid-template-columns: auto auto; */ /* Colunas automáticas para o botão Limpar e os botões de guia, e uma coluna flexível para preencher o espaço restante */
  gap: 10px; /* Espaçamento entre os botões */
  justify-items: center; /* Centraliza os itens na direção principal (horizontalmente) */
}

.clear-button-navsssss {
  justify-self: start; /* Alinha o botão "Limpar" à esquerda */
}





/*
.progress {
  margin: 0 auto; 
  width: 90%;  
  height: 5px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin-bottom: 20px;
}

.progress-bar {
  height: 100%;
  background-color: #9ab69b;
  border-radius: 1px;
  width: 0%;
  transition: width 0.3s ease;
}
*/
.progress-container {
  width: 90%; /* Largura fixa da barra de progresso */
  height: 5px; /* Altura da barra de progresso */
  background-color: #f0f0f0; /* Cor de fundo da barra de progresso */
  border-radius: 10px; /* Bordas arredondadas */
  overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse a barra de progresso */
}

.progress-bar {
  height: 100%; /* Altura total da barra de progresso */
 /* width: 20%; */ /* Largura inicial da barra de progresso */
  background-color: #499cf580; /* Cor da barra de progresso */
  border-radius: 10px; /* Bordas arredondadas */
  transition: transform 0.3s ease; /* Adiciona uma transição suave para a transformação */
}

/*
.spinner {
  width: 100px;
  height: 100px;
  position: relative;
}

.spinner.active::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border: 10px solid transparent; 
  border-top-color: #0858c2; 
  border-bottom-color: #0858c2; 
  border-radius: 50%;
  transform: rotate(-45deg); 
  animation: spin 0.5s linear infinite; 
}

@keyframes spin {
  100% {
    transform: rotate(315deg); 
  }
}
*/
.spinner {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.spinner.active::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 10px solid transparent; /* Largura da borda ajustável */
  border-top-color: #0858c2; /* Cor do aro */
  border-bottom-color: #0858c2; /* Cor do aro */
  border-radius: 50%;
  transform: rotate(-45deg); /* Rotação ajustável */
  animation: spin 0.5s linear infinite; /* Adiciona a animação quando a classe "active" está presente */
}

@keyframes spin {
  100% {
    transform: rotate(315deg); /* Rotação ajustável */
  }
}